<template>
  <div>
    <div class="blockLeft">
      <span class="aSpan">{{ptitle}}</span>
    </div>
    <div :class="pline === 1?'blockRightLong':'blockRight'">
      <span v-if="preadonly" class="aSpan">{{content}}</span>
      <select v-else class="aSelect" v-model="realValue" @change="changeAction">
        <option value="">------</option>
        <option v-for="(val,i) in optionList" :key="i"
                :value="val[optionDic.value]">{{val[optionDic.name]}}</option>
      </select>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'bpmCBlockselect',
  model: {
    prop: 'pcontent',
    event: 'changed'
  },
  props: {
    // 只读/可编辑,
    preadonly: {
      type: Boolean,
      default: false
    },
    // 可能占一整行或行的一半
    pline: {
      type: Number,
      default: 2
    },
    ptitle: {
      type: String,
      default: ' '
    },
    pcontent: '',
    showValue: '',
    pselectType: {
      type: String,
      default: ''
    },
    validateExp: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data: function () {
    return {}
  },
  computed: {
    ...mapState(['ssc', 'selectEnum', 'pageType', 'pageTypeEnum', 'openSelectAlert', 'gridSelectRow']),
    realValue: {
      get () {
        if (typeof this.pcontent === 'undefined' || this.pcontent === '') {
          return ''
        }
        return this.pcontent
      },
      set (value) {
        this.$emit('changed', value)
      }
    },
    content () {
      return this.textforvalue(this.realValue)
    },
    optionList () {
      if (this.pselectType === this.selectEnum.BB) {
        // console.log('option list BB', this.ssc.reimburse.bbOptions)
        return this.ssc.reimburse.bbOptions
      } else if (this.pselectType === this.selectEnum.paymentinternalorder) {
        // console.log('option list internalorder', this.ssc.reimburse.internalOrderList)
        return this.ssc.reimburse.internalOrderList
      } else if (this.pselectType === this.selectEnum.splitinternalorder) {
        return this.ssc.reimburse.splitInternalOrderList
      } else if (this.pselectType === this.selectEnum.paymentsubject) {
        // console.log('option list budgetsubject', this.ssc.reimburse.budgetSubjectList)
        return this.ssc.reimburse.budgetSubjectList
      } else if (this.pselectType === this.selectEnum.splitsubject) {
        // console.log('option list cost share budgetsubject', this.ssc.reimburse.splitBudgetSubjectList)
        return this.ssc.reimburse.splitBudgetSubjectList
      } else if (this.pselectType === this.selectEnum.postsubject) {
        // console.log('option list post budgetsubject', this.ssc.reimburse.postBudgetSubjectList)
        return this.ssc.reimburse.postBudgetSubjectList
      }
      return []
    },
    optionDic () {
      if (this.pselectType === this.selectEnum.BB) {
        return {
          name: 'name',
          value: 'value'
        }
      } else if (this.pselectType === this.selectEnum.paymentinternalorder ||
        this.pselectType === this.selectEnum.splitinternalorder) {
        return {
          name: 'inwardOrderName',
          value: 'inwardOrderCode'
        }
      } else if (this.pselectType === this.selectEnum.paymentsubject ||
        this.pselectType === this.selectEnum.splitsubject ||
        this.pselectType === this.selectEnum.postsubject) {
        return {
          name: 'budgetSubjectName',
          value: 'budgetSubjectCode'
        }
      }
      return []
    }
  },
  methods: {
    changeAction (event) {
      let to = event.target.value
      console.log('------to--------', to, this.realValue)
      if (this.openSelectAlert) {
        if (this.realValue && this.realValue + '' !== '') {
          if (this.pselectType === this.selectEnum.paymentinternalorder ||
            this.pselectType === this.selectEnum.paymentsubject) {
            let ifcon = confirm(this.getResource('alert.xgnbddts')) // 修改内部订单，会将已填写的对应相关信息清除，是否继续？
            if (!ifcon) {
              let cacheValue = this.realValue
              setTimeout(() => {
                this.$emit('changed', cacheValue)
              }, 100)
              return
            }
          }
        }
      }
      if (this.pselectType === this.selectEnum.paymentsubject) {
        // console.log('a')
        // console.log(this.ssc.reimburse.whBtReimburseDdSub)
        // console.log('b')
        // console.log(this.gridSelectRow.ssc.reimburse.whBtReimburseDdSub)
        for (let index in this.ssc.reimburse.whBtReimburseDdSub) {
          if (this.ssc.reimburse.whBtReimburseDdSub[index].subjectcode === to &&
          this.gridSelectRow.ssc.reimburse.whBtReimburseDdSub.internalordercode === this.ssc.reimburse.whBtReimburseDdSub[index].internalordercode) {
            alert(this.getResource('alert.information.kmdmbncf'))
            let cacheValue = this.realValue
            setTimeout(() => {
              this.$emit('changed', cacheValue)
            }, 100)
            return
          }
        }
      }
      this.$emit('valueChanged', to)
      if (to && to.length > 0) {
        for (let i = 0; i < this.optionList.length; i++) {
          if (this.optionList[i][this.optionDic.value] === to) {
            this.$emit('sltvalueChanged', JSON.stringify(this.optionList[i]))
            break
          }
        }
      } else {
        this.$emit('sltvalueChanged', JSON.stringify({}))
      }
    },
    textforvalue (value) {
      if (this.showValue && this.showValue !== '') {
        return this.showValue
      }
      if (!value || value === '') {
        return ''
      }
      for (let i in this.optionList) {
        let obj = this.optionList[i]
        if (obj[this.optionDic.value] === value) {
          return obj[this.optionDic.name]
        }
      }
      return value
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .blockLeft {
    background-color: #f4f4f4;
    float: left;
    text-align: center;
    width: 140px;
    min-height: 26px;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
  }
  .blockRight {
    background-color: #eff3f6;
    float: left;
    padding-left: 8px;
    min-height: 26px;
    width: 340px;
    min-width: 340px;
    text-align: left;
  }
  .blockRightLong {
    background-color: #eff3f6;
    float: left;
    padding-left: 8px;
    min-height: 26px;
    width: 830px;
    min-width: 830px;
    text-align: left;
  }
  .aSpan {
    display: block;
    margin-top: 4px;
  }
  .aSelect {
    width: 247px;
    display: block;
    margin-top: 4px;
  }
</style>
